<template>
  <div class="details-popup">
    <div class="details-content">
      <div class="details-title">
        <div class="title">{{ title }}详情</div>
        <div class="close-girl" @click="closeDel"></div>
      </div>
      <div class="details-main">
        <div class="tails-content">
          <div class="main-content">
            <div class="title-bar">
              <div class="customerout">项目区域</div>
              <div class="customerout">项目名称</div>
              <div class="customer">项目数量</div>
              <div class="customer">交易笔数</div>
              <div class="customer">交易金额</div>
              <div class="customer">手续费</div>
              <div class="customer">入账金额</div>
            </div>
            <div class="title-table">
              <div v-for="(item, i) in datas" :key="i" class="ain-column">
                <div class="customerout">{{ title }}</div>
                <div>
                  <div class="customerout" v-if="item.xm.length > 14">
                    <el-tooltip
                      effect="light"
                      :content="item.xm"
                      placement="top"
                    >
                      <div class="customelight">{{ item.xm }}</div>
                    </el-tooltip>
                  </div>

                  <div v-else class="customerout">{{ item.xm }}</div>
                </div>

                <div class="customer">{{ item.xmsl }}</div>
                <div class="customer">{{ item.jybs }}</div>
                <div class="customer">{{ item.jyje }}</div>
                <div class="customer">{{ item.sxf }}</div>
                <div class="customer">{{ item.rzje }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ain-right">
       共 {{ datas.length }} 条
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import { postRequest } from "../utils/request";
const emits = defineEmits(["close-area"]);
const props = defineProps({
  analysObj: {
    type: Object,
    default: {},
  },
});
let title = ref("");
let datas = ref([]);
let closeDel = () => {
  emits("close-area");
};
function getPreviousSixMonths() {
  const currentDate = new Date();
  const lastMonthDate = new Date(currentDate);
  lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
  const lastMonthYear = lastMonthDate.getFullYear();
  const lastMonth = lastMonthDate.getMonth() + 1;
  //return `${lastMonthYear}-${lastMonth.toString().padStart(2, "0")}`;
  return `${lastMonthYear}`;
}

let initanalysis = () => {
  postRequest("/screen/query/getCwYmtzjlrqkXm", {
    dw: props.analysObj.dw,
    rq: getPreviousSixMonths(),
  })
    .then(({ code, data }) => {
      if (code == 200) {
        datas.value = data;
      } else {
        datas.value = [];
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
onMounted(() => {
  title.value = props.analysObj.dw;
  initanalysis();
});
</script>
<style lang="less" scoped>
.details-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .details-content {
    width: 60vw;
    height: 65vh;
    background: #18386f;
    // overflow: hidden;
    .details-title {
      width: 100%;
      height: 5vh;
      border-bottom: 2px solid #588ec35d;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .title {
        width: 90%;
        height: 100%;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        font-size: 1.1vw;
        color: #ffffff;
        text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
        opacity: 0.97;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
    .details-main::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .details-main ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }

    .details-main::-webkit-scrollbar-thumb {
      background: #c9c5c5;
      border-radius: 10px;
    }

    .details-main ::-webkit-scrollbar-thumb:hover {
      background: #fff;
    }

    .details-main {
      width: 100%;
      height: 62vh;
      background: #18386f;
      overflow-y: scroll;
      .tails-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .main-content {
          width: 96%;
          margin: 1.1vh 2%;
          .title-bar {
            width: 100%;
            height: 5vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #588ec35d;
            font-family: Dream Han Sans CN;
            font-weight: normal;
            font-size: 0.8vw;
            color: #fffffffd;
            text-shadow: 0px 2px 5px rgba(1, 4, 8, 0.45);
          }
          .title-table {
            width: 100%;
            .ain-column {
              width: 100%;
              height: 5.2vh;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: Dream Han Sans CN;
              font-weight: normal;
              font-size: 0.8vw;
              color: #fffffffd;
              text-shadow: 0px 2px 5px rgba(1, 4, 8, 0.45);
            }
            .ain-column:nth-child(even) {
              background: #2098cc25;
              border: 1px solid #588ec35d;
            }
          }
        }
      }
    }
    .ain-right {
      width: 100%;
      height: 3vh;
      color: #fff;
      text-align: right;
      background: #18386f;
      padding-right:1.6vw;
      border-top: 1px solid #588ec35d;
      padding-top: 0.2vh;
    }
    .customelight {
      width: 11vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .close-girl {
      width: 32px;
      height: 32px;
      background: url("../assets/close.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .customer {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .customerout {
      width: 11vw;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 0.5vw;
    }
  }
}
</style>
